<template>
  <div>
    <div id="xg-video"></div>
    <el-link href="https://v2.h5player.bytedance.com/plugins/#xgplayer-flv"
      >更多配置访问</el-link
    >
  </div>
</template>
<script>
import { defineComponent, onMounted } from "vue-demi";
/** 兼容 */
import Player from "xgplayer/dist/core_player";
import play from "xgplayer/dist/controls/play";
import airplay from "xgplayer/dist/controls/airplay";
import fullscreen from "xgplayer/dist/controls/fullscreen";
import progress from "xgplayer/dist/controls/progress";
import pip from "xgplayer/dist/controls/pip";
import flex from "xgplayer/dist/controls/flex";
import volume from "xgplayer/dist/controls/volume";
import playbackRate from "xgplayer/dist/controls/playbackRate";
import cssFullscreen from "xgplayer/dist/controls/cssFullscreen";
export default defineComponent({
  setup() {
    onMounted(() => {
      let player = new Player({
        id: "xg-video",
        url: "http://192.168.1.4/2.mp4",
        controlPlugins: [
          volume,
          playbackRate,
          progress,
          fullscreen,
          pip,
          flex,
          play,
          cssFullscreen,
          airplay,
        ],
      });
      console.log("播放器实例", player);
    });
  },
});
</script>

<style>
</style>